import React from 'react';
import {Row, Col, Tag} from 'antd';
import * as actions from './../../actions/backstage/productAction';

export default class staffDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          userProfile: {},
          shoppingCartList: []
        };
    }
    componentDidMount(){
        actions.findUserDetail(this, this.props.routeParams.id);
    }
    render() {
        return (
            <div>
                <div className="divBaseInfo">
                    <div className="divTitle">用户信息</div>
                    <Row type="flex" className="rowLine" style={{height: '141px'}}>
                      <Col order={1}><img src={((this.state.userProfile.photoPic == undefined || this.state.userProfile.photoPic=="")?"/src/styles/images/default.png":"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + this.state.userProfile.photoPic)} className="imgHeader" /></Col>
                      <Col order={2}>姓名：</Col>
                      <Col order={3}>{((this.state.userProfile.firstName == undefined)?"":this.state.userProfile.firstName) + " " + ((this.state.userProfile.lastName == undefined)?"":this.state.userProfile.lastName)}</Col>
                      <Col order={4}>，性别：</Col>
                      <Col order={5}>{(this.state.userProfile.gender==1)?"男":"女"}</Col>
                      <Col order={6}>，工作：</Col>
                      <Col order={7}>{(this.state.userProfile.job == undefined)?"":this.state.userProfile.job}</Col>
                      <Col order={7} style={{float: 'left', position: 'absolute', marginLeft: '132px'}}><br />
                        家庭住址：{((this.state.userProfile.location == undefined)?"":this.state.userProfile.location) + " " + ((this.state.userProfile.position == undefined)?"":this.state.userProfile.position)}
                      </Col>
                      <Col order={8} style={{float: 'left', position: 'absolute', marginLeft: '132px', marginTop: '22px'}}><br />
                        电子邮件：{this.state.userProfile.email}
                      </Col>
                      <Col order={9} style={{float: 'left', position: 'absolute', marginLeft: '132px', marginTop: '46px'}}><br />
                        个人简述：{((this.state.userProfile.overview == undefined)?"":this.state.userProfile.overview)}
                      </Col>
                    </Row>
                    <div className="divTitle">购物车列表（{this.state.shoppingCartList.length}）</div>
                    {
                      this.state.shoppingCartList.map((item, index)=>{
                        return(<Row key={index} type="flex" className="rowLineStudnet">
                          <Col order={1}>
                            <img style={{width: '42px', marginRight: '4px', marginTop: '-11px'}} src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.productPic}/>
                            <div style={{display: 'inline-block', paddingTop: '5px', marginLeft: '5px'}}>
                              商品名：{((item.productName == undefined)?"":item.productName) + ((item.brandName == undefined)?"":"（" + item.brandName + "）")}
                              {((item.placeOfProduction == undefined)?"":"，产地：" + item.placeOfProduction)}
                              ，尺寸：<Tag color="#2db7f5">{((item.size == undefined)?"":item.size)}</Tag>
                              ，颜色：<Tag color="#f50">{((item.productColor == undefined)?"":item.productColor)}</Tag>
                              ，数量：<Tag color="#87d068">{((item.purchaseNum == undefined)?"":item.purchaseNum)}</Tag>
                              ，价格：<span style={{color: 'red', fontSize: '20px'}}>{'Rm' + ((item.discountPrice == undefined)?"":(item.discountPrice*item.purchaseNum).toFixed(2))}</span>
                              <span style={{color: 'gray', marginLeft: '5px', textDecoration: 'line-through', fontSize: '12px'}}>{'Rm' + ((item.price == undefined)?"":(item.price*item.purchaseNum).toFixed(2))}</span><br/>
                              {"温馨提示：" + ((item.reminder)?item.reminder:"无")}
                            </div>
                          </Col>
                        </Row>)
                      })
                    }
                </div>
            </div>
        )
    }
}
